<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">体重记录</block>
    </cu-custom>
    <view style="width: 100%;background-color: #fff;height: 500upx;display: flex;justify-content: space-around;position: relative;">
      <view style="margin-top: 200upx;text-align: center;">
        <view style="font-size: 38upx;">
          {{duibiWeight}}
        </view>
        <view style="color: #969696;margin-top: 30upx;">
          对比上次
        </view>
      </view>
      <view>
        <canvas style="position: absolute;top: 110upx;left: 250upx;" canvas-id="canvasArcbar1" id="canvasArcbar1" class="charts3"></canvas>
        <view style="position: absolute;top: 350upx;left: 250upx;display: flex;line-height: 50upx;height: 50upx;">
          <view class="">
            目标体重:
          </view>
          <view class="">
            <input style="width: 50upx;text-align: center;height: 50upx;border-bottom: 1upx solid #000000;" type="text"
              v-model="goalWeight" />
          </view>
          <view class="">
            kg
          </view>
        </view>
      </view>
      <view style="margin-top: 200upx;text-align: center;">
        <view style="font-size: 38upx;">
          {{goal}}kg
        </view>
        <view style="color: #969696;margin-top: 30upx;">
          距离目标
        </view>
      </view>
    </view>
    <view style="width: 100%;background-color: #fff;height: 700upx;position: relative;margin-top: 20upx;">
      <view class="qiun-charts" style="position: absolute;top: 110upx;left: 5upx;">
        <!--#ifndef MP-ALIPAY -->
        <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" style="background-color: #fff;" @touchstart="touchIt($event,'canvasColumn')"></canvas>
        <!--#endif-->
      </view>
    </view>
  </view>
</template>

<script>
  import uCharts from '../../components/u-charts/u-charts.js';
  var _self;
  var canvasObj = {};

  export default {
    data() {
      return {
        newWight: 60, // 最新的体重 饼图中
        goal: 0, // 距离目标
        goalWeight: "", // 目标体重
        duibiWeight: 0, // 对比上次
        cWidth: '',
        cHeight: '',
        cWidth2: '', //横屏图表
        cHeight2: '', //横屏图表
        cWidth3: '', //圆弧进度图
        cHeight3: '', //圆弧进度图
        arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
        gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
        tips: '',
        pixelRatio: 1,
        serverData: '',
        itemCount: 30, //x轴单屏数据密度
        sliderMax: 50,
        data: {
          Arcbar1: {
            series: [{
              color: "#2fc25b",
              data: 1.0,
              name: "50kg"
            }]
          },
          Column: {
            categories: [],
            series: []
          }
        }
      }
    },
    watch: {
      goalWeight(newVal, oldVal) {
        console.log(newVal, oldVal)
        this.goal = this.newWight - newVal
      }
    },
    async onLoad() {
      _self = this;
      //#ifdef MP-ALIPAY
      uni.getSystemInfo({
        success: function(res) {
          if (res.pixelRatio > 1) {
            //正常这里给2就行，如果pixelRatio=3性能会降低一点
            //_self.pixelRatio =res.pixelRatio;
            _self.pixelRatio = 2;
          }
        }
      });
      //#endif
      this.cWidth = uni.upx2px(750);
      this.cHeight = uni.upx2px(500);
      this.cWidth2 = uni.upx2px(700);
      this.cHeight2 = uni.upx2px(1100);
      this.cWidth3 = uni.upx2px(250);
      this.cHeight3 = uni.upx2px(250);
      this.arcbarWidth = uni.upx2px(24);
      this.gaugeWidth = uni.upx2px(30);
    },
    async onShow() {
      await this.setajax();
      setTimeout(() => {
        this.fillData();
      }, 2000)
    },
    onReady() {
      this.getServerData();
    },
    methods: {
      async setajax() {
        uni.showLoading({
          title: "正在加载数据..."
        })
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/body/getBodyMeasurementList",
          data: {
            // userId: 45,
            userId: uni.getStorageSync("phyUser").userId,
          }
        })
        uni.hideLoading();
        console.log("查看myRequest", datas);
        // 获取最新体重
        this.newWight = datas[datas.length - 1].weight
        // 获取距离目标
        this.data.Arcbar1.series[0].name = this.newWight + "kg";
        this.duibiWeight = datas[datas.length - 1].weight - datas[datas.length - 2].weight;
        let ucharts = {
          categories: [],
          series: [{
              data: [],
              name: "体重",
            },
            {
              data: [25, 45, 75, 45, 90],
              name: "训练课",
            }
          ]
        }
        datas.forEach((item, index) => {
          // 添加图表
          ucharts.categories.push(item.createTime.substring(item.createTime.indexOf('-') + 1))
          ucharts.series[0].data.push(item.weight)
        })
        this.data.Column.categories = ucharts.categories;
        this.data.Column.series = ucharts.series;
      },

      getServerData() {
        uni.showLoading({
          title: "正在加载数据..."
        })
        uni.request({
          url: 'https://unidemo.dcloud.net.cn/hello-uniapp-ucharts-data.json',
          data: {},
          success: function(res) {
            console.log('查看ucharts', res.data)
            // _self.fillData(res.data);

          },
          fail: () => {
            _self.tips = "网络错误，小程序端请检查合法域名";
          },
          complete() {
            uni.hideLoading();
          }
        });
      },
      fillData() {
        var data = this.data;
        console.log(data)
        this.serverData = data;
        this.tips = data.tips;
        // this.sliderMax = data.Candle.categories.length;
        let Column = {
          categories: [],
          series: []
        };
        let Arcbar1 = {
          series: []
        };
        console.log(Column)
        //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
        Column.categories = data.Column.categories;
        Arcbar1.series = data.Arcbar1.series;
        //这里的series数据是后台做好的，如果您的数据没有和前面我注释掉的格式一样，请自行拼接数据
        Column.series = data.Column.series;
        this.showColumn("canvasColumn", Column);
        this.showArcbar("canvasArcbar1", Arcbar1);
      },
      showArcbar(canvasId, chartData) {
        new uCharts({
          $this: _self,
          canvasId: canvasId,
          type: 'arcbar',
          fontSize: 11,
          title: {
            name: Math.round(chartData.series[0].data * 100) + '%',
            color: chartData.series[0].color,
            fontSize: 25 * _self.pixelRatio
          },
          subtitle: {
            name: chartData.series[0].name,
            color: '#666666',
            fontSize: 15 * _self.pixelRatio
          },
          extra: {
            arcbar: {
              type: 'default',
              width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
            }
          },
          background: '#FFFFFF',
          pixelRatio: _self.pixelRatio,
          series: chartData.series,
          animation: false,
          width: _self.cWidth3 * _self.pixelRatio,
          height: _self.cHeight3 * _self.pixelRatio,
          dataLabel: true,
        });

      },
      showColumn(canvasId, chartData) {
        canvasObj[canvasId] = new uCharts({
          $this: _self,
          canvasId: canvasId,
          type: 'column',
          padding: [15, 15, 0, 15],
          legend: {
            show: true,
            padding: 5,
            lineHeight: 11,
            margin: 0,
          },
          fontColor: '#FFFFFF',
          fontSize: 11,
          background: '#FFFFFF',
          pixelRatio: _self.pixelRatio,
          animation: false,
          categories: chartData.categories,
          series: chartData.series,
          xAxis: {
            disableGrid: true,
          },
          yAxis: {
            format: (val) => {
              return val.toFixed(0) + 'kg'
            },
            min: 0,
            max: 150,
          },
          dataLabel: true,
          width: _self.cWidth * _self.pixelRatio,
          height: _self.cHeight * _self.pixelRatio,
          extra: {
            column: {
              type: 'group',
              width: 15
            }
          }
        });
      },
      touchIt(e, id) {
        canvasObj[id].touchLegend(e, {
          animation: false
        });
        canvasObj[id].showToolTip(e, {
          format: function(item, category) {
            if (typeof item.data === 'object') {
              return category + ' ' + item.name + ':' + item.data.value + 'kg'
            } else {
              return category + ' ' + item.name + ':' + item.data + 'kg'
            }
          }
        });
      },
      changeData() {
        canvasObj['canvasColumn'].updateData({
          series: _self.serverData.ColumnB.series,
          categories: _self.serverData.ColumnB.categories
        });
      },

      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },
    }
  }
</script>

<style>
  page {
    overflow-x: hidden;
  }

  .qiun-padding {
    padding: 2%;
    width: 96%;
  }

  .qiun-wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .qiun-rows {
    display: flex;
    flex-direction: row !important;
  }

  .qiun-columns {
    display: flex;
    flex-direction: column !important;
  }

  .qiun-common-mt {
    margin-top: 10upx;
  }

  .qiun-bg-white {
    background: #FFFFFF;
  }

  .qiun-title-bar {
    width: 96%;
    padding: 10upx 2%;
    flex-wrap: nowrap;
  }

  .qiun-title-dot-light {
    border-left: 10upx solid #0ea391;
    padding-left: 10upx;
    font-size: 32upx;
    color: #000000
  }

  /* 通用样式 */
  .qiun-charts {
    width: 750upx;
    height: 500upx;
    background-color: #FFFFFF;
  }

  .charts {
    width: 750upx;
    height: 500upx;
    background-color: #FFFFFF;
  }

  /* 横屏样式 */
  .qiun-charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #FFFFFF;
    padding: 25upx;
  }

  .charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #FFFFFF;
  }

  /* 圆弧进度样式 */
  .qiun-charts3 {
    width: 750upx;
    height: 250upx;
    background-color: #FFFFFF;
    position: relative;
  }

  .charts3 {
    position: absolute;
    width: 250upx;
    height: 250upx;
    background-color: #FFFFFF;
  }

  .qiun-tip {
    display: block;
    width: auto;
    overflow: hidden;
    padding: 15upx;
    height: 30upx;
    line-height: 30upx;
    margin: 10upx;
    background: #ff9933;
    font-size: 30upx;
    border-radius: 8upx;
    justify-content: center;
    text-align: center;
    border: 1px solid #dc7004;
    color: #FFFFFF;
  }
</style>
